<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="js/mytools.js"></script>
</head>
<body>
<!--顶部-->
  <div class="head">
      <ul class="left">
          <li><span style="color: black">欢迎光临</span> china-pub网上书店</li>
          <li><button><span style="color: black">[</span>登录<span style="color: black">]</span></button></li>
          <li><button><span style="color: black">[</span>注册<span style="color: black">]</span></button></li>
      </ul>
      <ul class="right">
          <li><a href="#">我的china-pub<img src="images/down.jpg" style="float: right;margin-top: 7px"></a></li>
          <li>|</li>
          <li><img src="images/cell.png" style="float: right;margin-top: 5px"></li>
          <li style="margin-left: 17px"><a href="#">移动端专享</a></li>
          <li>|</li>
          <li><a href="#">图书团购</a></li>
          <li>|</li>
          <li><a href="#">购书卡</a></li>
          <li>|</li>
          <li><a href="#">帮助中心<img src="images/down.jpg" style="float: right;margin-top: 7px"></a></li>
          <li>|</li>
          <li><a href="#"><img src="images/ling.png" style="width: 22px;float: left;margin-top: 9px">在线咨询</a></li>
          <li><a href="#"><img src="images/weibo.png" style="float: right;margin-top: 2px"></a> </li>
          <li><a href="#"><img src="images/weixin.png" style="float: right;margin-top: 7px"></a> </li>
      </ul>
  </div>
  <!--logo部分-->
  <div class="top">
      <img src="images/logo.png" class="logo">
      <div class="sosuo">
          <input type="text" class="shuru">
          <input type="button" value="搜&nbsp;&nbsp;索" class="so">
          <p>
              <ul class="ww">
                 <li>热门搜索:</li>
                 <li>算法</li>
                 <li>数据库</li>
                 <li><span style="color: #F1820B">代数</span></li>
                 <li>c++</li>
                 <li><span style="color: #F1820B">微商</span></li>
                 <li><span style="color: #F1820B">概率</span></li>
              </ul>
          </p>
      </div>
      <div class="text">
          高级搜索
      </div>
      <div class="gouwuche">
          <img src="images/gouwuche.png" style="width: 19px;float: left;margin-top: 6px;margin-left: 10px;margin-right: 10px">
          <span>购物车&nbsp;<span class="num">0</span>&nbsp;件</span>
          <img src="images/down.jpg" style="float: right;margin-top: 10px;margin-right: 10px">
      </div>
  </div>
<!--导航栏-->
  <div class="nav">
     <ul class="daohang">
         <li style="margin-left: 40px; background-color: #F1820B;padding-left: 30px">全部图书分类<img src="images/list.png" style="float:right;margin-top: 12px;padding-right:30px;margin-left: 30px"></li>
         <li style="margin-left: 30px">|</li>
         <li>首页</li>
         <li>|</li>
         <li>移动端专享</li>
         <li>|</li>
         <li>新书</li>
         <li>|</li>
         <li>特价书</li>
         <li>|</li>
         <li>借阅</li>
         <li>|</li>
         <li>教材</li>
         <li>|</li>
         <li>电子书</li>
         <li>|</li>
         <li>视频教程</li>
         <li>|</li>
         <li>按需印刷</li>
         <li>|</li>
         <li>在线阅读</li>
         <li>|</li>
         <li>排行榜</li>
         <li>|</li>
         <li>书评</li>
     </ul>
  </div>
<!--单行的信息-->
  <p>
     <ul class="fenlei">
        <li>首页</li>
        <li>></li>
        <li>分类浏览</li>
        <li>></li>
        <li>计算机</li>
        <li>></li>
        <li><span style="color: black">软件与程序设计</span></li>
     </ul>
     <ul class="xinxi">
         使用<span style="color: red">&nbsp;Javascript&nbsp;</span>搜索，共有&nbsp;<span style="color: red">593</span>&nbsp;<span style="color: red">中</span>&nbsp;商品
     </ul>
  </p>
  <div class="kon"></div>
<!--左边div，里面是图书的分类-->
      <div class="jieshao">
         <div class="tou">
            <p>图书分类</p>
         </div>
         <ul class="suoyou">
             <li>计算机<span class="yanse">（483）</span></li>
             <li>geekpeers<span class="yanse">（10）</span></li>
             <li>进口图书<span class="yanse">（7）</span></li>
             <li>工业技术<span class="yanse">（6）</span></li>
             <li>医学<span class="yanse">（2）</span></li>
             <li>教材<span class="yanse">（1）</span></li>
             <li>经济管理<span class="yanse">（1）</span></li>
             <li>机械工业出版社分类专区<span class="yanse">（1）</span></li>
         </ul>
      </div>
  </div>
<!--右边书籍相关内容-->
  <div class="content">
      <div class="one">
         <ul class="one-1">
             <li><span style="color: black"> 相关搜索：</span></li>
             <li>javascript语言</li>
             <li>html&nbsp;&nbsp;javascript</li>
             <li>javascript&nbsp;&nbsp;definitive</li>
             <li>javascript&nbsp;&nbsp;语言</li>
             <li>javascript&nbsp;&nbsp;图灵</li>
             <li>javascript&nbsp;&nbsp;实战</li><br>
             <li>javascript&nbsp;&nbsp;实例</li>
             <li>css&nbsp;&nbsp;javascript</li>
         </ul>
      </div>
      <div class="two">
         <ul class="two-1">
             <li style="border: none;margin-right: 25px;font-size: 12px">排序：</li>
             <li style="background-color: #F1820B">关注度<img src="images/search_down_arr.gif" class="jiantou"></li>
             <li>销量<img src="images/search_down_arr.gif" class="jiantou"></li>
             <li>价格<img src="images/search_down_arr.gif" class="jiantou"></li>
             <li>书评数<img src="images/search_down_arr.gif" class="jiantou"></li>
             <li>读者评分<img src="images/search_down_arr.gif" class="jiantou"></li>
             <li>出版时间<img src="images/search_down_arr.gif" class="jiantou"></li>
             <li>上架时间<img src="images/search_down_arr.gif" class="jiantou"></li>
         </ul>
          <hr width="810px;">
         <ul class="two-2">
             <li>筛选：</li>
             <li>全部</li>
             <li>电子书（69）</li>
             <li>特价书（6）</li>
             <li>按需印刷（1）</li>
         </ul>
      </div>
  </div>
<script src="js/index.js"></script>
</body>
</html>